<template>
	<view class="container">
		<custom-navigation-bar background='linear-gradient(135deg, #faed00 0%, #fdb218 25%, #d63d2d 60%, #64024d 100%);' class="nav-bar" title="贵宾服务中心" color='#FFF' :back="false"></custom-navigation-bar>
		<!-- 顶部导航 -->
		<!-- <view class="" :style="{height: calcStatusHeight+'px'}">

		</view> -->
		<scroll-view class="scroll-area w-100" style="flex: 1;" scroll-y type="nested"
			worklet:onscrollupdate="handleScrollUpdate">
			<!-- 顶部宣传轮播图 -->
			<nested-scroll-header>
				<view class="flex-col align-center" style="width: 100vw;">
					<view class="w-100 flex-col justify-center" style="height: 80rpx;background-color: #ccc;">
						<swiper layout-type='transformer' autoplay="2000" transformer-type='deepthPage' vertical
							class="banner-swiper" interval="5000" duration="500" 
							indicator-type='jumpWithOffset' :style="{flex:`1`}" indicator-color="rgba(255,255,255,0.5)"
							indicator-active-color="#ffffff" circular @change='swiperChange'>
							<swiper-item v-for="(item, index) in bannerList" :key="index">
								<view class="plr-30 justify-center "  :style="{ flex:1 }">
										<text>{{ item.desc }}</text>
								</view>
							</swiper-item>
						</swiper>
						
					</view>
					<view class="banner-container">
						<swiper layout-type='transformer' autoplay="2000" transformer-type='threeD'
							class="banner-swiper" interval="5000" duration="500" indicator-dots
							indicator-type='jumpWithOffset' :style="{flex:`1`}" indicator-color="rgba(255,255,255,0.5)"
							indicator-active-color="#ffffff" circular @change='swiperChange'>
							<swiper-item v-for="(item, index) in bannerList" :key="index">
								<view class="banner-item " :style="{ backgroundColor: item.bgColor }">
									<image src="/static/images/banner.jpg" mode="widthFix" class="banner-image"
										@click="handleBannerClick(item)"></image>
									<view class="banner-desc" v-if="item.desc">
										<text>{{ item.desc }}</text>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>


					<!-- 核心功能区 - 突出核销功能 -->
					<view class="primary-function" @tap="handleVerification" v-if="false">
						<view class="verification-card">
							<image class="entry-icon" src="https://lcx.gtds.tech/uploads/20250611/menu_07.svg" mode="">
							</image>
							<text class="verification-text">二维码核销</text>
							<svg class="arrow-right" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
								<path d="M6,12 L18,12 M14,8 L18,12 L14,16" stroke="#1a73e8" stroke-width="2" fill="none"
									stroke-linecap="round" stroke-linejoin="round" />
							</svg>
						</view>
					</view>

					<!-- 服务入口 -->
					<view class="service-entry w-100">
						<!-- <view class="entry-title">服务项目</view> -->
						<view class="entry-grid">
							<navigator url="/subPackages/viplounge/international" class="entry-item">
								<image class="entry-icon " src="/static/images/homes/t1.svg" mode=""></image>
								<text class="entry-text ">国际贵宾</text>
							</navigator>
							<navigator url="/subPackages/viplounge/domestic" class="entry-item">
								<image class="entry-icon" src="/static/images/homes/t2.svg" mode=""></image>
								<text class="entry-text">国内贵宾</text>
							</navigator>
							<navigator url="/subPackages/cards/index" class="entry-item">
								<image class="entry-icon" src="/static/images/homes/t3.svg" mode=""></image>
								<text class="entry-text">权益卡</text>
							</navigator>
							<navigator url="/subPackages/vip/index/index" class="entry-item">
								<image class="entry-icon" src="/static/images/homes/t4.svg" mode=""></image>
								<text class="entry-text">至尊升级</text>
							</navigator>
						</view>
					</view>
					<!-- Tab切换 -->
					<view class="to-location">

					</view>
					<view class="to-loca ">

					</view>

					<!-- <u-tabs class='' :list="list1" @click="handleTabClick" :scrollable='false' lineColor="#f56c6c"
				:activeStyle="{ color: '#ff0000', borderColor: '#1a73e8' }" :current="currentTab"></u-tabs> -->


				</view>

			</nested-scroll-header>
			<!-- <sticky-section> -->

			<!-- </sticky-section> -->
			<!-- 列表内容 -->
			<nested-scroll-body>
				<view class="service-list-container w-100" :style="{flex:`1`}">
					<view class=" tabs">
						<bs-tabs class="" :tabWidth='tabWidth' :list="list1" :current="currentTab"
							@onTapTab='handleTabClick' lineColor="#f56c6c"
							:activeStyle="{ color: '#ff0000', borderColor: '#1a73e8' }"></bs-tabs>
					</view>
					<swiper layout-type='transformer' transformer-type='scaleAndFade' class="scroll-list"
						:style="{flex:`1`}" :current="currentTab" @change="onTabChanged" duration="400">
						<swiper-item>
							<scroll-view class="" :style="{flex:`1`}" scroll-y type="custom"
								@scrolltolower="onScrollToLower" @scrolltoupper='scrolltoupper' enhanced="true"
								associative-container="nested-scroll-view">
								<!-- <sticky-header>
								  <view class="w-100"> <bs-tabs class="w-100" :list="list1" :current="currentTab" @onTapTab='handleTabClick'
						lineColor="#f56c6c" :activeStyle="{ color: '#ff0000', borderColor: '#1a73e8' }"></bs-tabs> </view>
								</sticky-header> -->
								<view class="service-list1">
									<view class="" v-for="(item, index) in internationalServices" :key="index">
										<open-container :closed-elevation="closedElevation"
											:closed-border-radius="closedBorderRadius" :open-elevation="openElevation"
											:open-border-radius="openBorderRadius" :transition-type="type"
											:transition-duration="duration" @tap="goDetail">
											<view class="service-item flex-row">
												<view class="b_cover">
													<bs-img width='280rpx' height="280rpx" class="b_cover" v-if="index==0" src="https://lcx.gtds.tech/uploads/20230808/b1f15ad4243119c67d85d091f6daf217.png"></bs-img>
													<!-- <image class="b_cover" v-if="index==0"
														src="https://lcx.gtds.tech/uploads/20230808/b1f15ad4243119c67d85d091f6daf217.png"
														mode="">
													</image> -->
													<bs-img width='280rpx' height="280rpx" class="b_cover" v-if="index==1" src="/static/images/yidengji2.jpg"></bs-img>
													<!-- <image class="b_cover" v-if="index==1"
														src="/static/images/yidengji2.jpg" mode="">
													</image> -->
												</view>
												
												<view class="" style="flex: 1;">
													<view class="service-header flex-row">
														<text class="service-name">{{ item.name }}</text>
														<text class="service-price"
															v-if="item.price">¥{{ item.price }}/次</text>
													</view>
													<view class="service-content">
														<view class="service-desc flex-row"
															v-for="(desc, i) in item.description" :key="i">
															<text class="desc-icon">•</text>
															<text class="desc-text">{{ desc }}</text>
														</view>
													</view>
												</view>
											</view>
										</open-container>
									</view>
									<view class="empty-tip" v-if="internationalServices.length === 0">
										<text>暂无国际贵宾服务</text>
									</view>
									<u-gap :height="(4-internationalServices.length)*180" bgColor="#bbbfff00"></u-gap>
								</view>

							</scroll-view>
						</swiper-item>
						<swiper-item>
							<scroll-view class="" :style="{flex:`1`}" scroll-y type="custom"
								@scrolltolower="onScrollToLower" @scrolltoupper='scrolltoupper' enhanced="true"
								associative-container="nested-scroll-view">
								<!-- <sticky-header>
								  <view class="w-100"> <bs-tabs class="w-100" :list="list1" :current="currentTab" @onTapTab='handleTabClick'
						lineColor="#f56c6c" :activeStyle="{ color: '#ff0000', borderColor: '#1a73e8' }"></bs-tabs> </view>
								</sticky-header> -->

								<!-- 国内贵宾列表 -->
								<view class="service-list">
									<view class="" v-for="(item, index) in domesticServices"
										:key="index">
										<open-container :closed-elevation="closedElevation"
											:closed-border-radius="closedBorderRadius" :open-elevation="openElevation"
											:open-border-radius="openBorderRadius" :transition-type="type"
											:transition-duration="duration" @tap="goDetail">
											<view class="service-item flex-row">
											<image class="b_cover"
												src="https://lcx.gtds.tech/uploads/20230808/b1f15ad4243119c67d85d091f6daf217.png"
												mode="">
											</image>
											<view class="" style="flex: 1;">
												<view class="service-header flex-row">
													<text class="service-name">{{ item.name }}</text>
													<text class="service-price"
														v-if="item.price">¥{{ item.price }}/次</text>
												</view>
												<view class="service-content">
													<view class="service-desc flex-row"
														v-for="(desc, i) in item.description" :key="i">
														<text class="desc-icon">•</text>
														<text class="desc-text">{{ desc }}</text>
													</view>


												</view>
											</view>
											</view>
										</open-container>
									</view>

									<view class="empty-tip" v-if="domesticServices.length === 0">
										<text>暂无国内贵宾服务</text>
									</view>
									<u-gap :height="(4-domesticServices.length)*180" bgColor="#bbbfff00"></u-gap>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
					<!-- 国际贵宾列表 -->

				</view>
			</nested-scroll-body>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getCurrentInstance
	} from 'vue'
	var animation = uni.createAnimation({
		transformOrigin: "50% 50%",
		duration: 1000,
		timingFunction: "ease",
		delay: 0
	})
	const {
		shared,
		Easing,
		runOnJS
	} = wx.worklet
	const lerp = function(begin, end, t) {
		'worklet'
		return begin + (end - begin) * t
	}
	const clamp = function(cur, lowerBound, upperBound) {
		'worklet'
		if (cur > upperBound) return upperBound
		if (cur < lowerBound) return lowerBound
		return cur
	}
	var navBarOpactiy = shared(1)
	var navBarheight = shared(1)
	var searchBarWidth = shared(0)
	export default {

		props: {
			scrollTop: 0
		},
		watch: {
			scrollTop: {
				handler(nval, val) {
					let _this = this
					const query = uni.createSelectorQuery().in(this);

					query.select('.to-loca')
						.boundingClientRect(data => {
							if (data) {
								if (data.top < 89) {
									_this.navBgcolor = '#FFF'
								} else {
									_this.navBgcolor = 'rgba(255, 255, 255, .5)'
								}
								// data.top就是元素上边缘到视口顶部的距离
								console.log('元素到顶部的距离：', data);

							}
						})
						.exec();
					console.log('nval,val', nval, val);
				}
			}
		},
		data() {

			// :closed-elevation="closedElevation"
			// :closed-border-radius="closedBorderRadius"
			// :open-elevation="openElevation"
			// :open-border-radius="openBorderRadius"
			// :transition-type="type"
			// :transition-duration="duration"
			// @tap="goDetail"

			return {
				// 容器动画
				type: 'fade',
				duration: 300,
				closedElevation: 1,
				closedBorderRadius: 4,
				openElevation: 4,
				openBorderRadius: 0,

				tabWidth: 100,
				// navBarOpactiy:null,
				swiperNum: 0,
				navBgcolor: 'rgba(255, 255, 255, .5)',
				list1: [{
					name: '国际贵宾'
				}, {
					name: '国内贵宾'
				}],
				currentTab: 0, // 0:国际贵宾 1:国内贵宾
				userInfo: {},
				isStaff: false, // 是否为核销人员
				myCards: [{
						id: 1,
						type: 'time-limited',
						status: 'active',
						expireDate: '2023-12-31'
					},
					{
						id: 2,
						type: 'count-limited',
						status: 'active',
						remainingCount: 5
					}
				],
				// 轮播图数据
				bannerList: [{
						id: 1,
						imageUrl: '/static/banners/vip-banner1.png', // 替换为实际图片路径
						desc: '国际贵宾通道限时优惠',
						bgColor: '#000000',
						url: '/pages/vip/international' // 点击跳转链接
					},
					{
						id: 2,
						imageUrl: '/static/banners/vip-banner2.png', // 替换为实际图片路径
						desc: '权益卡买一送一活动',
						bgColor: '#0f9d58',
						url: '/pages/cards/index' // 点击跳转链接
					},
					{
						id: 3,
						imageUrl: '/static/banners/vip-banner3.png', // 替换为实际图片路径
						desc: '国内贵宾专属包房折扣',
						bgColor: '#fa983a',
						url: '/pages/vip/domestic' // 点击跳转链接
					}
				],
				// 国际贵宾服务列表
				internationalServices: [{
						name: '贵宾通道',
						price: 580,
						description: [
							'贵宾楼限时免费停车',
							'礼宾员前台办理值机及核销服务',
							'陪抵贵宾厅，专属安检通道',
							'优先登机'
						],
						extra: [{
							name: '会议室租赁',
							price: '800元/小时'
						}]
					},
					{
						name: '易登机优享通道',
						price: 480,
						description: [
							'安检后专属休息区',
							'提供饮品和小食',
							'航班信息提醒'
						]
					}
				],

				// 国内贵宾服务列表
				domesticServices: [{
						name: '贵宾通道(1)',
						price: 380,
						description: [
							'贵宾楼限时免费停车',
							'礼宾员服务',
							'前台办理值机及核销服务',
							'陪抵贵宾厅，定时自助餐',
							'专属安检通道，优先登机'
						],
						extra: [{
								name: '小包',
								price: '500元/小时'
							},
							{
								name: '中包',
								price: '1000元/小时'
							},
							{
								name: '大包',
								price: '2000元/小时'
							}
						]
					},
					{
						name: '易登机优享通道(2)',
						price: 280,
						description: [
							'航站楼1号门处“专用通道”',
							'专属休息区休息',
							'协助办理值机、托运行李',
							'头等舱安检通道'
						]
					},
					{
						name: '易登机优享通道(3)',
						price: 480,
						description: [
							'航站楼1号门处“专用通道”',
							'专属休息区休息',
							'协助办理值机、托运行李',
							'头等舱安检通道',
							'安检后，头等舱休息室（休息、用餐）'
						]
					},
					{
						name: '易登机优享通道(4)',
						price: 180,
						description: [
							'安检后，头等舱休息室休息、用餐'
						]
					}
				],

			}
		},
		computed: {
			calcStatusHeight() {
				// #ifdef VUE3
				const {
					globalProperties: global
				} = getCurrentInstance().appContext.config;
				console.log('global', global.windowInfo.statusBarHeight);
				return `${global.windowInfo.statusBarHeight}`;
				// #endif
				// #ifdef VUE2
				return `${this.statusHeight}`
				// #endif
			},
			navBarHeight() {
				// #ifdef VUE3
				const {
					globalProperties: global
				} = getCurrentInstance().appContext.config;
				console.log('global', global.navBarHeight);
				return `${global.navBarHeight}`;
				// #endif
			}
		},
		onLoad() {
			// 检查登录状态
			// this.checkLoginStatus();
		},
		created() {

		},
		mounted() {
			const scope = getCurrentInstance().proxy.$scope
			console.info('this.applyAnimatedStyle', scope.applyAnimatedStyle);
			console.info('this.scale', `scale(${navBarOpactiy.value})`);
			scope.applyAnimatedStyle('.nav-bar', () => {
				'worklet'
				console.info('navBarheight.value@@', navBarheight.value);
				return {
					opacity: navBarOpactiy.value,
					transform: `scaleY(${navBarheight.value})`,
					// height:`calc(${this.navBarHeight}px * ${navBarheight.value} + ${navBarheight.value==0?this.calcStatusHeight:0}px) `,
					height: `${(this.calcStatusHeight - 10) > (this.navBarHeight*navBarheight.value)?(this.calcStatusHeight - 10):(this.navBarHeight*navBarheight.value)}px`,
					// display:navBarOpactiy.value==0?'none':'flex'
				}
			})
			scope.applyAnimatedStyle('.tabs', () => {
				'worklet'
				return {
					transform: `translateX(${searchBarWidth.value}%) scale(${navBarOpactiy.value})`,

				}
			})
		},
		methods: {
			scrolltoupper() {
				console.log(';到定');
			},
			onScrollToLower() {
				console.log(';到底');
			},
			handleScrollUpdate(evt) {
				'worklet'
				console.info('evt1@@', evt)
				const maxDistance = 220
				const scrollTop = clamp(evt.detail.scrollTop, 0, maxDistance)
				const progress = scrollTop / maxDistance
				const EasingFn = Easing.cubicBezier(0.4, 0.0, 0.2, 1.0)
				navBarOpactiy.value = lerp(1, 0.8, progress)
				navBarheight.value = lerp(1, 0, progress)
				searchBarWidth.value = lerp(0, -10, EasingFn(progress))
			},

			onTabChanged(evt) {
				console.log('evt', evt);
				const index = evt.detail.current
				this.currentTab = index
				// if (this.renderer !== 'skyline') {
				// 		translateX: this._tabWidth.value * index
				// }
			},

			// 
			swiperChange(e) {
				this.swiperNum = e.detail.current
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/order/order',
				});
			},
			// Tab切换事件
			handleTabClick(index) {
				this.currentTab = index;
				// 切换时可滚动到顶部
				// this.$nextTick(() => {
				// 	this.goTop()
				// })

			},
			goTop() {
				// this.$emit('goTop')
				console.log('this.calculateHeight', this.calculateHeight);
				wx.pageScrollTo({
					selector: '.tabbar-page>>>.to-loca',
					duration: 500,
					offsetTop: -this.calculateHeight,
					complete(res) {
						console.log('res', res);
					}
				});
			},

			// 预约服务
			bookService(service, type) {
				// 检查登录状态
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/index'
								});
							}
						}
					});
					return;
				}

				// 跳转到预约页面
				const serviceInfo = {
					type: type === 'international' ? 'international' : 'domestic',
					name: service.name,
					price: service.price,
					extra: service.extra
				};

				uni.navigateTo({
					url: `/pages/services/book?serviceInfo=${encodeURIComponent(JSON.stringify(serviceInfo))}`
				});
			},
			// 轮播图点击事件
			handleBannerClick(item) {
				if (item.url) {
					uni.navigateTo({
						url: item.url
					});
				}
			},
			checkLoginStatus() {
				// 实际项目中从本地存储或接口获取用户信息
				const user = uni.getStorageSync('userInfo');
				if (user) {
					this.userInfo = user;
					this.isStaff = user.role === 'staff';
				}
			},
			toUserCenter() {
				if (Object.keys(this.userInfo).length === 0) {
					uni.navigateTo({
						url: '/pages/login/index'
					});
				} else {
					uni.navigateTo({
						url: '/pages/user/index'
					});
				}
			},
			handleVerification() {
				// 无论是否为工作人员都可以进入核销页面
				uni.navigateTo({
					url: '/pages/verification/index'
				});
			},
			getUserTypeText() {
				if (!this.userInfo.type) return '';
				switch (this.userInfo.type) {
					case 'retail':
						return '散客';
					case 'member':
						return '固有会员';
					case 'prepaid':
						return '储值用户';
					default:
						return '';
				}
			},
			// 充值相关方法
			selectAmount(amount) {
				this.selectedAmount = amount;
				this.customAmount = ''; // 清空自定义金额
			},
			handleCustomAmount() {
				// 输入自定义金额时，清除选中的默认金额
				this.selectedAmount = 0;
			},
			confirmRecharge() {
				// 验证充值金额
				let rechargeAmount = this.selectedAmount || Number(this.customAmount) || 0;

				if (rechargeAmount <= 0) {
					uni.showToast({
						title: '请输入有效的充值金额',
						icon: 'none'
					});
					return;
				}

				// 模拟充值操作
				uni.showLoading({
					title: '充值中...'
				});

				setTimeout(() => {
					uni.hideLoading();

					// 更新余额
					this.userBalance += rechargeAmount;

					// 更新本地存储中的用户信息
					this.userInfo.balance = this.userBalance;
					uni.setStorageSync('userInfo', this.userInfo);

					// 显示充值成功
					uni.showToast({
						title: `充值${rechargeAmount}元成功`,
						icon: 'success'
					});

					// 关闭弹窗
					this.showRechargeModal = false;

					// 实际项目中这里应该调用后端接口进行充值
					console.log(`充值金额: ${rechargeAmount}元`);
				}, 1500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tabs {
		border-bottom: 1rpx solid #f5f5f5;
	}

	.scroll-area {
		// height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
	}

	.container {
		flex: 1;
		background-color: #ffffff;
		min-height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;

		// 顶部导航
		.navbar {
			// background-color: #1a73e8;
			// padding: 40rpx 30rpx 20rpx;

			.navbar-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #000000;
			}
		}


		@keyframes wiggle {
			0% {
				/* 初始状态 */
				transform: rotate(0deg);
			}

			33% {
				/* 轻微向左旋转 */
				transform: rotate(-1deg);
			}

			66% {
				/* 轻微向右旋转 */
				transform: rotate(1deg);
			}

			100% {
				/* 最终恢复正常状态 */
				transform: rotate(0deg);
			}
		}

		// 服务入口
		.service-entry {
			margin-top: 0rpx;
			padding: 0 30rpx 0rpx;
			position: relative;
			z-index: 1;

			.entry-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				padding-left: 10rpx;
			}

			.entry-grid {
				display: flex;
				flex-direction: row;
				justify-content: space-around;

				.entry-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 30rpx 0;
					border-radius: 16rpx;
					transition: all 0.3s ease;

					// &:hover {
					// 	transform: translateY(-3rpx);
					// 	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.07);
					// }

					.entry-icon {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 20rpx;
						/* 关键：将变换原点设置在底部中心，使图片绕底部旋转 */
						transform-origin: center bottom;
						/* 应用动画 */
						animation: wiggle 1s ease-out forwards;
					}

					.entry-text {
						font-size: 28rpx;
						color: #666;
						font-weight: 500;
						/* 关键：将变换原点设置在底部中心，使图片绕底部旋转 */
						transform-origin: center bottom;
						/* 应用动画 */
						animation: wiggle 1s ease-out forwards;

					}
				}
			}
		}



		// 底部填充，确保内容不被导航栏遮挡
		.bottom-space {
			height: 20rpx;
		}
	}


	// 轮播图样式
	.banner-container {
		width: 95%;
		margin: 0 auto;
		overflow: hidden;
		margin-bottom: 10rpx;
		border-radius: 20rpx;
		position: relative;
		z-index: 1;

		.banner-swiper {
			width: 100%;
			height: 300rpx; // 轮播图高度，可根据需求调整

			.banner-item {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.banner-image {
					width: 100%;
					height: 100%;
					object-fit: cover; // 保持图片比例并覆盖整个区域
				}

				.banner-desc {
					position: absolute;
					bottom: 30rpx;
					left: 30rpx;
					color: #ffffff;
					font-size: 28rpx;
					font-weight: 500;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
				}
			}
		}
	}

	/* Tab切换区域样式 */
	::v-deep .u-tabs {
		background-color: #fff;
		margin-bottom: 10rpx;
	}

	::v-deep .u-tab-item {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
	}

	.bborder {
		box-shadow: 0px 0px 0px 0.5px green;
	}

	.to-location {
		width: 750rpx;
		height: 20rpx;
		background: #f5f5f5;
	}

	/* 服务列表容器 */
	.service-list-container {
		flex: 1;
		position: relative;
		z-index: 1;
	}

	/* 定义动画关键帧 */
	@keyframes fadeIn {
		0% {
			/* 开始状态：透明、缩小、向上偏移 */
			opacity: 0.7;
			transform: scale(1) translate(100%, 0rpx);
		}

		100% {
			/* 结束状态：完全显示、正常大小、正常位置 */
			opacity: 1;
			transform: scale(1) translate(0, 0);
		}
	}

	@keyframes ffadeIn {
		0% {
			/* 开始状态：透明、缩小、向上偏移 */
			opacity: 0.7;
			transform: scale(1) translate(-100%, 0rpx);
		}

		100% {
			/* 结束状态：完全显示、正常大小、正常位置 */
			opacity: 1;
			transform: scale(1) translate(0, 0);
		}
	}

	/* 服务列表样式 */
	.service-list1 {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		z-index: 1;
		animation: ffadeIn .2s ease-out forwards;
	}

	.service-list {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		z-index: 1;
		animation: fadeIn .2s ease-out forwards;
	}

	.service-item {
		padding: 25rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		display: flex;
		justify-content: start;

		&:last-child {
			border-bottom: none;
		}

		.b_cover {
			width: 280rpx;
			height: 280rpx;
			display: block;
			border-radius: 30rpx;
			margin-right: 20rpx;
			overflow: hidden;
		}

		.service-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.service-name {
				font-size: 30rpx;
				font-weight: 800;
				color: #333;
			}

			.service-price {
				font-size: 24rpx;
				color: #e53e3e;
				font-weight: 500;
			}
		}

		.service-content {
			margin-bottom: 20rpx;

			.service-desc {
				display: flex;
				align-items: flex-start;
				margin-bottom: 12rpx;

				.desc-icon {
					color: #ff5500;
					font-size: 28rpx;
					line-height: 1;
					margin-right: 10rpx;
				}

				.desc-text {
					font-size: 22rpx;
					color: #666;
					line-height: 1.5;
				}
			}

			.extra-charge {
				margin-top: 15rpx;
				padding-top: 15rpx;
				border-top: 1rpx dashed #eee;

				.extra-title {
					font-size: 26rpx;
					color: #333;
					margin-bottom: 10rpx;
					display: block;
					font-weight: 500;
				}

				.extra-items {
					display: flex;
					flex-wrap: wrap;
					gap: 15rpx;

					.extra-item {
						font-size: 24rpx;
						color: #666;
						background-color: #f9f9f9;
						padding: 5rpx 15rpx;
						border-radius: 60rpx;
					}
				}
			}
		}


	}

	/* 空状态提示 */
	.empty-tip {
		padding: 60rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #999;
		background-color: #fff;
		border-radius: 16rpx;
	}
</style>